<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 3.3</title>
</head>
<body>
<canvas id="circuitCanvas" width="450" height="400"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings to mimic the hand-drawn look
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 3;
    ctx.lineCap = 'round'; // Makes line ends smoother
    // Using a font that resembles handwriting
    ctx.font = 'bold 24px "Comic Sans MS", cursive, sans-serif';

    // --- Helper function to draw a resistor symbol ---
    function drawResistor(x, y_start, y_end) {
        const w = 12; // width of the zigzag
        const h = y_end - y_start;
        ctx.beginPath();
        ctx.moveTo(x, y_start);
        ctx.lineTo(x - w, y_start + h * 1 / 8);
        ctx.lineTo(x + w, y_start + h * 3 / 8);
        ctx.lineTo(x - w, y_start + h * 5 / 8);
        ctx.lineTo(x + w, y_start + h * 7 / 8);
        ctx.lineTo(x, y_end);
        ctx.stroke();
    }

    // --- Define key coordinates for the circuit layout ---
    const xLeft = 100;
    const xRight = 250;
    const yTop = 50;
    const yBottom = 280;
    const yJunctionA = 160; // Vertical position of terminal A
    const yBattery = (yTop + yBottom) / 2;

    // --- Draw the main circuit loop ---

    // Left vertical wire and battery
    ctx.beginPath();
    ctx.moveTo(xLeft, yTop);
    ctx.lineTo(xLeft, yBattery - 20);
    ctx.moveTo(xLeft, yBattery + 20);
    ctx.lineTo(xLeft, yBottom);
    ctx.stroke();

    // Battery symbol (long line for +, short for -)
    ctx.beginPath();
    ctx.moveTo(xLeft - 20, yBattery - 10); // Positive plate
    ctx.lineTo(xLeft + 20, yBattery - 10);
    ctx.moveTo(xLeft - 10, yBattery + 10); // Negative plate
    ctx.stroke();
    
    // Battery labels (Voltage and Polarity)
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('15 V', xLeft - 30, yBattery);
    const polarityFont = 'bold 30px "Comic Sans MS", cursive, sans-serif';
    ctx.font = polarityFont;
    ctx.fillText('+', xLeft + 35, yBattery - 12);
    ctx.fillText('-', xLeft + 35, yBattery + 12);
    ctx.font = 'bold 24px "Comic Sans MS", cursive, sans-serif'; // Restore original font

    // Top horizontal wire
    ctx.beginPath();
    ctx.moveTo(xLeft, yTop);
    ctx.lineTo(xRight, yTop);
    ctx.stroke();
    
    // Bottom horizontal wire
    ctx.beginPath();
    ctx.moveTo(xLeft, yBottom);
    ctx.lineTo(xRight, yBottom);
    ctx.stroke();
    
    // --- Draw the right branch with resistors ---
    // Resistor 1 (24 Ohm, top)
    drawResistor(xRight, yTop, yJunctionA);
    // Resistor 2 (6 Ohm, bottom)
    drawResistor(xRight, yJunctionA, yBottom);

    // Resistor labels
    ctx.textAlign = 'left';
    ctx.fillText('24 Ω', xRight + 25, (yTop + yJunctionA) / 2);
    ctx.fillText('6 Ω', xRight + 25, (yJunctionA + yBottom) / 2);
    
    // --- Draw the output terminals A and B ---
    const xTerminal = xRight + 120;
    
    // Wires extending to terminals
    ctx.beginPath();
    ctx.moveTo(xRight, yJunctionA);
    ctx.lineTo(xTerminal, yJunctionA);
    ctx.moveTo(xRight, yBottom);
    ctx.lineTo(xTerminal, yBottom);
    ctx.stroke();
    
    // Terminal points (filled circles)
    ctx.beginPath();
    ctx.arc(xTerminal, yJunctionA, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(xTerminal, yBottom, 4, 0, 2 * Math.PI);
    ctx.fill();

    // Terminal labels
    ctx.fillText('A', xTerminal + 15, yJunctionA);
    ctx.fillText('B', xTerminal + 15, yBottom);

    // --- Draw the figure caption ---
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 3.3', (xLeft + xRight) / 2, yBottom + 50);

</script>
</body>
</html>